<style lang="scss" scoped>
    .one-index{
        .header{
            position: relative;
            width: 100%;
            height: 6.5rem;
            background-image: url(./../assets/images/bg-header.png);
            background-size: cover;
            .scrollNav{
                color: #fff;
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }
        .secone-nav{
            width: 100%;
            text-align: center;
            display: -webkit-flex;
            display: flex;
            .secone-item{
                position: relative;
                -webkit-flex: 1;
                flex: 1;
                height: 3.13rem;
                line-height: 3.13rem;
                font-size: 0.81rem;
                color: #757575;
                .wrap {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate3d(-50%,-50%,0);
                    transform: translate3d(-50%,-50%,0);
                    white-space: nowrap;
                }
                .icon {
                    position: absolute;
                    top: 50%;
                    left: 0.4rem;
                    display: inline-block;
                    background-size: cover;
                }
                &.act {
                    color: #FF6632;
                }
                &.hot-sort, &.crown-sort{
                    flex: 2;
                    .wrap{
                        padding-left: 1.5rem;
                    }
                }
                &.hot-sort .icon {
                    background-image: url(./../assets/images/icon_hot_default@2x.png);
                    width: 0.69rem;
                    height: 0.88rem;
                    margin-top: -.445rem;
                }

                &.hot-sort.act .icon {
                    background-image: url(./../assets/images/icon_hot_selected@2x.png);
                }

                &.crown-sort .icon {
                    background-image: url(./../assets/images/icon_crown_default@2x.png);
                    width: 0.88rem;
                    height: 0.75rem;
                    margin-top: -.38rem;
                }

                &.crown-sort.act .icon {
                    background-image: url(./../assets/images/icon_crown_selected@2x.png);
                }
            }
        }
    }
</style>

<template>
    <div class="one-index">
        <div class="header">
            <scrollNav class="scrollNav" :navData="firstNavData" @navChange="navChange"></scrollNav>
        </div>
        <ul class="secone-nav">
            <li class="secone-item crown-sort act">
                <span class="wrap">
                    <span class="icon"></span>
                    推荐排序
                </span>
            </li>
            <li class="secone-item hot-sort">
                <span class="wrap">
                    <span class="icon"></span>
                    人气排序
                </span>
            </li>
        </ul>
        <!-- 父组件传入的参数名必须为msgTxt -->
        <msgBox :msgTxt="msgTxt"></msgBox>
        <!-- 父组件传入的参数名必须为promptObj -->
        <prompt :promptObj="promptObj"></prompt>
    </div>
</template>

<script>
    import scrollNav from '@/components/scrollNav.vue';
    import msgBox from '@/components/msgBox.vue';
    import prompt from '@/components/prompt.vue';
    
    export default {
        name: 'oneIndex',
        components: {
            scrollNav,
            msgBox,
            prompt,
        },
        data(){
            return {
                //滚动菜单数据
                firstNavData: {
                    type: 2,
                    data: [
                        {cate_name: '内衣', cate_id: 1},
                        {cate_name: '运动', cate_id: 2},
                        {cate_name: '内衣', cate_id: 3},
                        {cate_name: '服饰', cate_id: 4},
                        {cate_name: '运动', cate_id: 5}
                    ]
                }, 
                msgTxt: '', //父组件传入的参数名必须为msgTxt
                //父组件传入的参数名必须为promptObj
                promptObj: {
                    show: true,
                    // tittle: '标题',
                    ptmTxt: '顶顶顶顶'
                },
            }
        },
        created(){
        },
        methods: {
            navChange(id){
                console.log(id);
            }
        }
    }
</script>
